<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>web成果展示</title>
		<link rel="stylesheet" type="text/css" href="./css/自定义栅格.css" />
		<link rel="stylesheet" type="text/css" href="./css/webProduct.css" />
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
		<link rel="shortcut icon" href="./img/木.png">
	</head>
	<style type="text/css">
#content{flex-basis: 80%;flex-grow: 1;flex-shrink: 1;background: #999;}
#content .lbt{height: 1000px;background: #999;padding-bottom: 100px;}
#content .lbt #box {width: 200px;height: 200px;perspective: 60000px;perspective-origin:-100px 1000px ;margin:100px auto;transform-style: preserve-3d;animation: run 30s infinite linear;}
#content #box>div{position: absolute;width: 200px;height:200px;background: deeppink;line-height: 50px;color: #fff;font-size: 50px;text-align: center;line-height: 100px;opacity: .9;border: 10px solid #fff;}
#content #box>div img{width: 100%;height: 100%;}
.item1 {transform: rotatey(0deg) translatez(400px);}
.item2{transform: rotatey(30deg) translatez(400px);}
.item3{transform: rotatey(60deg) translatez(400px);}
.item4{transform: rotatey(90deg) translatez(400px);}
.item5{transform: rotatey(120deg) translatez(400px);}
.item6{transform: rotatey(150deg) translatez(400px);}
.item7{transform: rotatey(180deg) translatez(400px);}
.item8{transform: rotatey(210deg) translatez(400px);}
.item9{transform: rotatey(240deg) translatez(400px);}
.item10{transform: rotatey(270deg) translatez(400px);}
.item11{transform: rotatey(300deg) translatez(400px);}
.item12{transform: rotatey(330deg) translatez(400px);}
.item14{transform: rotatey(0deg);}
@keyframes run {
	from {transform: rotate3d(0,1,0,0deg);}
	to {transform: rotate3d(0,1,0,360deg);}
			}

	</style>

	<body>
		<div id="myHome">

			<!--内容部分-->
			<div id="content">
				<div class="lbt">
					<div id="box">
						<div class="item1 a">
							<img src="./img/1.jpg" />
						</div>
						<div class="item2 a">
							<img src="./img/2.jpg" />
						</div>
						<div class="item3 a">
							<img src="./img/3.jpg" />
						</div>
						<div class="item4 a">
							<img src="./img/4.jpg" />
						</div>
						<div class="item5 a">
							<img src="./img/5.jpg" />
						</div>
						<div class="item6 a">
							<img src="./img/6.jpg" />
						</div>
						<div class="item7 a">
							<img src="./img/7.jpg" />
						</div>
						<div class="item8 a">
							<img src="./img/8.jpg" />
						</div>
						<div class="item9 a">
							<img src="./img/9.jpg" />
						</div>
						<div class="item10 a">
							<img src="./img/10.jpg" />
						</div>
						<div class="item11 a">
							<img src="./img/11.jpg" />
						</div>
						<div class="item12 a">
							<img src="./img/12.jpg" />
						</div>
						<div class="item14 a">

						</div>

					</div>

				</div>
			</div>

		</div>

		
		<div class="toTOP">
			<div class="f_top">

			</div>
		</div>

		</div>
	</body>

</html>